<template>
  <div>
    <!-- 左边侧边栏 -->
    <el-aside id="aside" class="open" style="background: #324157">
      <!-- 侧边栏 -->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#324157"
        :collapse-transition="false"
        text-color="#fff"
        :collapse="isCollapse"
        router
      >
        <template v-for="(item, index) in list">
          <!-- 二级的页面 -->
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                :index="it.index"
                v-for="(it, ind) in item.subs"
                :key="ind"
              >
                <i class="el-icon-menu"></i>
                <span slot="title">{{ it.title }}</span>
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else>
            <!-- 单个页面 -->
            <el-menu-item :index="item.index" :key="index">
              <i class="el-icon-menu"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import bus from "@/uilts/bus.js";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      // 设置开关的
      isCollapse: false,
      list: [
        {
          icon: "el-icon-s-home",
          index: "dashboard",
          title: "系统首页",
        },
        {
          icon: "el-icon-s-home",
          index: "index",
          title: "第二个首页",
        },
        {
          icon: "el-icon-thumb",
          index: "",
          title: "用户",
          subs: [
            {
              index: "userlist",
              title: "用户列表",
            },
          ],
        },
        {
          icon: "el-icon-thumb",
          index: "1",
          title: "商品",
          subs: [
            {
              index: "goods",
              title: "商品管理",
            },
            {
              index: "category",
              title: "品类管理",
            },
          ],
        },
        {
          icon: "el-icon-thumb",
          index: "2",
          title: "订单",
          subs: [
            {
              index: "order",
              title: "订单管理",
            },
          ],
        },
        {
          icon: "el-icon-menu",
          index: "table",
          title: "基础表格",
        },
        {
          icon: "el-icon-document-copy",
          index: "tabs",
          title: "tab选项卡",
        },
        {
          icon: "el-icon-s-order",
          index: "3",
          title: "表单相关",
          subs: [
            {
              index: "form",
              title: "基本表单",
            },
            {
              index: "3-2",
              title: "三级菜单",
              subs: [
                {
                  index: "editor",
                  title: "富文本编辑器",
                },
                {
                  index: "markdown",
                  title: "markdown编辑器",
                },
              ],
            },
            {
              index: "upload",
              title: "文件上传",
            },
          ],
        },
        {
          icon: "el-icon-star-on",
          index: "icon",
          title: "自定义图标",
        },
        {
          icon: "el-icon-pie-chart",
          index: "charts",
          title: "schart图表",
        },
        {
          icon: "el-icon-thumb",
          index: "6",
          title: "拖拽组件",
          subs: [
            {
              index: "drag",
              title: "拖拽列表",
            },
            {
              index: "dialog",
              title: "拖拽弹框",
            },
          ],
        },

        {
          icon: "el-icon-s-help",
          index: "i18n",
          title: "国际化功能",
        },
        {
          icon: "el-icon-error",
          index: "7",
          title: "错误处理",
          subs: [
            {
              index: "permission",
              title: "权限测试",
            },
            {
              index: "404",
              title: "404页面",
            },
          ],
        },
        {
          icon: "el-icon-medal",
          index: "/donate",
          title: "支持作者",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getheight();
    // 监听页面变化修改高度
    window.addEventListener("resice", this.getheight);
    // 兄弟传值
    bus.$on("open", (item) => {
      this.isCollapse = item;
      if (item == true) {
        aside.className = "shut";
      } else {
        aside.className = "open";
      }
    });
  },
  methods: {
    //  设置导航栏高度
    getheight() {
      let html = document.documentElement || document.body;
      let height = html.clientHeight;
      aside.style.height = height - 20 + "px";
      main.style.height = height - 60 + "px";
    },
  },
};
</script>

<style lang='scss' scoped>
.el-menu {
  border: none;
}
// 关的类名
.shut {
  width: 67px !important;
}
// 开的类名
.open {
  width: 200px !important;
}
</style>
